<template>
  <view>
    <form @submit="formSubmit">
      <uni-section title="采购申请产品清单"></uni-section>
      <!-- <tui-list-cell :hover="false">
        <view class="tui-line-cell">
          <view class="tui-title">采购编号</view>
          <view class="tui-right">{{randomStr}}</view>
        </view>
      </tui-list-cell>-->
      <kmlc-buy-list ref="buyList" @onChange="onChange"></kmlc-buy-list>

      <tui-list-cell :hover="false">
        <view class="tui-title"><text class="isrequire">*</text>采购原因</view>
        <view>
          <textarea auto-height class="tui-input" v-model="remark" placeholder="备注信息" />
        </view>
      </tui-list-cell>
      <view class="jiange"></view>
      <view class="btn pad10">
        <button type="primary" formType="submit">保存</button>
      </view>
    </form>
  </view>
</template>

<script>
import { getProductList, saveProductList } from "@/pages/work/interface.js";
import {navigate} from '@/common/framework';
export default {
  onLoad(opt) {
    console.log(opt);

    setTimeout(() => {
      //   this.username = opt.username;
    }, 300);
  },

  data() {
    return {
      prodList: [],
      remark: "",
      randomStr: Math.random()
        .toString(36)
        .substr(2)
    };
  },
  onNavigationBarButtonTap(e) {
    this.$refs.buyList.addProduct();
  },
  methods: {
    formSubmit(e) {
      this.prodList.forEach(item => {
        if (!item.pCount) {
          uni.showToast({
            icon: "none",
            title: "请选择需要采购的产品"
          });
          return;
        }
        if (!item.pCount) {
          uni.showToast({
            icon: "none",
            title: "请添加采购数量"
          });
          return;
        }
      });
      let prodList = this.prodList.map(item => {
        return {
          quantity: item.pCount,
          remark: item.remark,
          maStConfId: item.pId
        };
      });
      if(!this.remark){
        uni.showToast({
            icon: "none",
            title: "请填写采购原因！"
          });
        return;
      }
      let params = {
        billPurchaseNu: this.randomStr,
        billPurchaseMaterialList: prodList,
        remark: this.remark
      };
      // console.log(params);
      this.saveBuyList(params);
    },
    async saveBuyList(params) {
      let Res = await saveProductList(params);
      if (Res && Res.success) {
        uni.showToast({
          icon: "none",
          title: "保存成功~！"
        });
        setTimeout(() => {
          if (Res.result.taskId) {
            this.goDetailPage(Res.result.taskId);
          } else {
            uni.navigateBack();
          }
        }, 1000);
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "保存失败~！"
        });
      }
    },
    onChange(e) {
      // console.log(e);
      this.prodList = e;
    },

    goDetailPage(taskId) {
      let url = `/pages/work/approval_detail/approval_detail?taskId=${taskId}`;
      navigate.redirectPage(url);
    }
  }
};
</script>

<style lang="scss">
.btn {
  background: #fff;
}
.pad10 {
  padding: 20upx 30upx;
}
.tui-right {
  margin-left: auto;
  margin-right: 34upx;
  font-size: 26upx;
  line-height: 1;
  color: #999;
}
.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
}
.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-title {
  line-height: 32rpx;
  flex-shrink: 0;
}
.isrequire{
  color: #d41200;
}
</style>